<template>
  <svg
    class="svg-icon"
    :id="uuid"
    :style="{
      minWidth:`${width||size}px`,
      minHeight:`${height||size}px`,
      maxWidth:`${width||size}px`,
      maxHeight:`${height||size}px`,
    }"
    aria-hidden="true">
    <use :xlink:href="`#icon-${icon}`" :id="uuid" :class="{
      '__svg-ani-path':isHover
    }"/>
  </svg>
</template>

<script setup>
import {onMounted, nextTick, ref} from 'vue'

const props = defineProps({
  icon: {
    type: String,
    default: ''
  },
  size: {
    type: [Number, String],
    default: 16
  },
  height: {
    type: [Number, String],
    default: undefined
  },
  width: {
    type: [Number, String],
    default: undefined
  },
  color: {
    type: String,
    default: undefined
  },
  isHover: {
    type: Boolean,
    default: false
  }
})

const uuid = ref(`svg_icon_uuid__${Math.floor(Math.random() * 10000000)}`)
onMounted(() => {
  nextTick(() => {
    if (props.isHover) {
      const dom = document.querySelector(`#icon-${props.icon} g`)
      let len = 0
      Array.from(dom.children).forEach(path => {
          if (path.getTotalLength) {
            console.log('svg icon child__', props.icon, path.getTotalLength())
            len += path.getTotalLength()
          }
        })
      const useDom = document.querySelector(`#${uuid.value}`)
      if(useDom) useDom.style.setProperty('--l',len)
    }


  })
})
</script>

<style scoped lang="scss">
.svg-icon {
  fill: currentColor !important;
  overflow: hidden;
  display: block;
  outline: none;

}

@keyframes svg-hover {
  100% {
    stroke-dashoffset: 0;
    fill: currentColor;
    stroke: transparent;
  }

}

.__svg-ani-path {
  stroke: transparent;
  fill: currentColor;
}

.svg-icon:hover .__svg-ani-path {
  fill: transparent;
  stroke: currentColor;
  stroke-dashoffset: var(--l);
  stroke-dasharray: var(--l);
  animation: svg-hover 2s linear forwards;
}
</style>
